<template>
	<view>
		<cu-custom :bgcolor="'#fff'" />
		<view class="search-box p-2">
			<view class="input" @click="showDrawer('showLeft')">
				<view class="iconfont icon-sousuo main-text-color"></view>
				<input class="uni-input search-input" style="padding-left: 80rpx;" disabled placeholder="请输入搜索内容" />
				<text class="font-md main-text-color search">搜索</text>
			</view>
		</view>
		<!-- 搜索栏的弹出层 -->
		<uni-drawer ref="showLeft" mode="left" :width="280" @change="change($event,'showLeft')">
			<view class="p-2" style="padding-top: 200rpx;">
				<uni-forms :modelValue="formData" label-position="top" ref="form">
					<uni-forms-item label="订单号">
						<uni-easyinput type="text" v-model="formData.order_sn" placeholder="请输入订单号" />
					</uni-forms-item>
					<uni-forms-item label="收货人">
						<uni-easyinput type="text" v-model="formData.consignee" placeholder="请输入收货人" />
					</uni-forms-item>
					<uni-forms-item label="订单状态" label-width="120">
						<uni-data-select v-model="formData.composite_status" placeholder="请选择订单状态"
							:localdata="orderStatusList"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="开始日期" label-width="120">
						<uni-datetime-picker type="datetime" v-model="formData.start_time_time" />
					</uni-forms-item>
					<uni-forms-item label="结束日期" label-width="120">
						<uni-datetime-picker type="datetime" v-model="formData.end_time_time" />
					</uni-forms-item>
					<uni-forms-item label="订单简号" label-width="120">
						<uni-easyinput type="text" v-model="formData.out_trade_no" placeholder="请输入订单号" />
					</uni-forms-item>
				</uni-forms>
				<view class="button-box mt-4">
					<button class="main-bg-color text-white font-md mb-1" @click="resetForm">重置</button>
					<button class="main-bg-color text-white font-md" @click="search">搜索</button>
				</view>
			</view>

		</uni-drawer>
		<view v-if="shopList && shopList.length >0">
			<scroll-view scroll-y="false" :style="'height:'+scorllHeight+ 'px;'" refresher-enabled="true"
				:refresher-triggered="triggered" @refresherrefresh="refresherrefresh">
				<view class="shop-list">
					<view class="list-box pt-3 pb-3 pl-4 pr-4 mb-2" v-for="(item, index) in shopList" :key="index">
						<view class="list">
							<view class="list-center-info span-20 d-flex flex-column">
								<view class="d-flex flex-row span-20 j-sb font-md">
									<text class="mr-2  span-14">订单号: {{item.order_sn}}</text>
								</view>
								<view class="d-flex flex-row span-20 j-sb font-md text-light-muted">
									<text class="mr-2 span-5">订单状态:</text>
									<text
										class="flex-1 text-success text-right">{{returnOrderStatus(item.new_order_status)}}</text>
								</view>
								<view class="d-flex flex-row span-20 j-sb text-light-muted font-md">
									<text class="mr-2 span-5">下单时间:</text>
									<text class="flex-1 text-right">{{item.formatted_add_time}}</text>
								</view>
								<view class="d-flex flex-row span-20 j-sb text-light-muted font-md">
									<text class="mr-2  span-5">收货人:</text>
									<text class="flex-1 text-right">{{item.consignee}}[TEL：{{item.mobile}}]
										{{item.address}}</text>
								</view>
								<!-- <view class="d-flex flex-row span-20 j-sb text-light-muted font-md">
									<text class="mr-2  span-5">评价:</text>
									<text class="flex-1 text-right">价格合理，味道鲜美</text>
								</view> -->
								<view class="d-flex flex-row span-20 j-end text-light-muted font-md">
									<text class="mr-2">总金额: <text
											class="main-text-color">{{item.formated_total_fee}}</text></text>
									<text>应付款: <text
											class="main-text-color">{{item.formated_order_amount}}</text></text>
								</view>
							</view>
						</view>
						<view class="list-btn mt-3 d-flex flex-row a-center j-end">
							<button v-if="item.new_order_status == 2"
								class="mini-btn m-0 mr-2 input-border-color border bg-none main-text-color"
								type="default" size="mini" @click.stop="takingorders(item.order_id)">开始接单</button>
							<button v-if="item.new_order_status == 11"
								class="mini-btn m-0 mr-2 input-border-color border bg-none main-text-color"
								type="default" size="mini" @click.stop="delivery(item.order_id)">发货</button>
							<button v-if="item.new_order_status == 11"
								class="mini-btn m-0 mr-2 input-border-color border bg-none main-text-color"
								type="default" size="mini" @click.stop="viewLogistics(item.order_id)">查看物流</button>
							<button v-if="item.new_order_status == 4"
								class="mini-btn m-0 mr-2 input-border-color border bg-none main-text-color"
								type="default" size="mini" @click.stop="agreeToRefund(item.order_id)">同意退款</button>
							<!-- <button class="mini-btn m-0 mr-2 input-border-color border bg-none main-text-color"
								type="default" size="mini" @click.stop="invaildOrder(item.order_id)">订单无效</button> -->
							<button class="mini-btn m-0 main-bg-color text-white" type="default" size="mini"
								@click.stop="toDetail(item.order_id)">查看详情</button>
						</view>
					</view>

				</view>
				<!-- <view class="d-flex a-center j-center text-light-muted font-md py-3">{{loadtext}}</view> -->
			</scroll-view>
		</view>
		<view v-else class="text-center mt-5">
			暂无数据
		</view>
	</view>
</template>

<script>
	import title from "@/components/common/title.vue"
	import divider from "@/components/common/divider.vue"
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			title,
			divider,
			cuCustom
		},
		data() {
			return {
				triggered: false,
				_freshing: false,
				value: 0,
				orderStatusList: [{
						value: "2",
						text: "已付款 商家待接单"
					},
					{
						value: "3",
						text: "用户取消订单"
					},
					{
						value: "4",
						text: "用户点击申请退款"
					},
					{
						value: "11",
						text: "待送达"
					},
					{
						value: "12",
						text: "订单已完成"
					}

				],
				scorllHeight: 500,
				shopList: [],
				loadtext: "上拉加载更多",
				allChecked: false,
				formData: {
					name: "",
					order_sn: "",
					consignee: "",
					composite_status: "",
					start_time: "",
					end_time: "",
					out_trade_no: "",
				},
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(350)
				})
			})
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			refresherrefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (!this.triggered) //界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				setTimeout(() => {
					this.triggered = false; //触发onRestore，并关闭刷新图标  
					this._freshing = false;
					this.getOrderList()
				}, 1000)
			},
			resetForm() {
				this.formData = {
					name: "",
					order_sn: "",
					consignee: "",
					composite_status: "",
					start_time_time: "",
					end_time_time: "",
					out_trade_no: "",
				}
				this.getOrderList()
			},
			search() {
				this.getOrderList()
			},
			onKeyInput(e) {
				console.log(e.detail.value)
			},
			change(e) {
				console.log("e:", e);
			},
			toDetail(id) {
				uni.navigateTo({
					url: "./orderDetail?id=" + id
				})
			},
			toDelete(index) {
				console.log(index)
			},
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			getOrderList() {
				let params = Object.assign({}, {
					supplier_id: uni.getStorageSync('supplier_id')
				}, this.formData)
				interceptor.get("/supplier_applet_api.php?act=orderList", params).then((res) => {
					if (res.status === 1) {
						console.log(res)
						this.shopList = res.info.order_list
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 返回订单状态
			returnOrderStatus(status) {
				switch (status) {
					case "1":
						return "已提交 待支付"
						break;
					case "2":
						return "已付款 商家待接单"
						break;
					case "3":
						return "用户取消订单"
						break;
					case "4":
						return "用户点击申请退款"
						break;
					case "5":
						return "商家同意退款商家同意退款"
						break;
					case "6":
						return "商家长时间未接单 自动退款"
						break;
					case "7":
						return "商家拒绝退款"
						break;
					case "8":
						return "后台强制退款"
						break;
					case "9":
						return "商家接单"
						break;
					case "10":
						return "骑手接单 待取货"
						break;
					case "11":
						return "待送达"
						break;
					case "12":
						return "订单已完成"
						break;
					default:
						break;
				}
			},
			// 开始接单
			takingorders(id) {
				let _that = this
				let params = {
					supplier_id: uni.getStorageSync("supplier_id"),
					order_id: id
				}
				interceptor.get("/supplier_applet_api.php?act=startAcceptingOrders", params).then((res) => {
					if (res.status == 1) {
						uni.showToast({
							title: '接单成功',
							icon: "success",
							success() {
								setTimeout(() => {
									_that.getOrderList()
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 我要发货
			delivery() {
				uni.showToast({
					title: "暂未开放! 敬请期待",
					icon: "none"
				})
			},
			// 查看物流
			viewLogistics() {
				uni.showToast({
					title: "暂未开放! 敬请期待",
					icon: "none"
				})
			},
			// 同意退款
			agreeToRefund(id) {
				let _that = this
				let params = {
					order_id: id
				}
				interceptor.get("/supplier_applet_api.php?act=refund", params).then((res) => {
					if (res.status === 1) {
						uni.showToast({
							title: res.msg,
							icon: "success",
							success() {
								setTimeout(() => {
									_that.getOrderList()
								}, 1500)

							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})

			},
			// 无效订单
			invaildOrder(id) {
				let _that = this
				let params = {
					supplier_id: uni.getStorageSync("supplier_id"),
					order_id: id
				}
				interceptor.get("/supplier_applet_api.php?act=refuseOrder", params).then((res) => {
					if (res.status === 1) {
						uni.showToast({
							title: res.msg,
							icon: "success",
							success() {
								setTimeout(() => {
									_that.getOrderList()
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-box {
		width: 100%;
		height: 160upx;
		background: #fff;

		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.input {
			width: 100%;
			border-radius: 20px;
			overflow: hidden;
			border: 1px solid #BBBBBB;
			position: relative;

			.icon-sousuo {
				position: absolute;
				left: 35upx;
				top: 10upx;
			}

			.search {
				position: absolute;
				right: 40upx;
				top: 8upx;
			}
		}
	}

	.shop-list {
		background: #EBECED;
		height: auto;
		padding: 32rpx;
		box-sizing: border-box;

		.list-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			// height: 452rpx;

			.list {
				// height: 360rpx;
				border-bottom: 1px dashed #dcdcdc;
			}

			.list-btn {}
		}

	}

	::v-deep .uni-date-changed {
		padding: 40rpx 40rpx !important;
	}
</style>